<template>
  <div class="pump-report" v-loading="pageLoading">
    <div class="report-header">
      <div class="actions">
        <el-select
          v-model="selectedHost"
          placeholder="请选择主机"
          clearable
          filterable
          value-key="device_kg_id"
          @change="handleHostChange"
        >
          <el-option
            v-for="item in hostSelectOptions"
            :key="item.device_kg_id"
            :label="item.device_name"
            :value="item"
          />
        </el-select>
        <TimeSelect @time-change="handleScopeChange" />
      </div>
    </div>

    <div class="title-line">
      <div class="date-text">{{ dateLabel }}</div>
    </div>

    <div class="content-row">
      <div class="status-section">
        <div class="status-title">
          <span>主机状态</span>
          <span class="status-count">今日开机数: {{ todayPowerOnCount }}</span>
        </div>
        <div class="status-strip" v-if="hostStatusList.length">
        <div
          v-for="item in hostStatusList"
          :key="item.device_kg_id"
          class="status-item"
          :class="item.statusType"
        >
          <div class="icon-wrap">
            <img 
              v-if="item.isPowerOnPos === '1'" 
              src="@/assets/images/pz-pumpRunIcon.png" 
              alt="运行"
              class="status-icon"
            />
            <img 
              v-else-if="item.isPowerOnPos === '0'" 
              src="@/assets/images/pz-pumpStopIcon.png" 
              alt="停止"
              class="status-icon"
            />
            <i v-else :class="item.icon"></i>
          </div>
          <div class="status-info">
            <div class="name">{{ item.device_name || '未命名主机' }}</div>
            <div class="state">
              {{ item.statusText }}
            </div>
          </div>
        </div>
      </div>
      </div>

      <div class="summary-grid">
        <div class="summary-card runtime">
          <div class="label">总运行时长（h）</div>
          <div class="value">{{ formatNumber(summary.runtimeHours) }}</div>
          <div class="hint">基于{{ scopeLabel }}周期</div>
        </div>
        <div class="summary-card energy">
          <div class="label">总用电量（kW·h）</div>
          <div class="value">{{ formatNumber(summary.totalEnergyKwh) }}</div>
          <div class="hint">用电量汇总</div>
        </div>
        <div class="summary-card active-power">
          <div class="label">有功功率（kW）</div>
          <div class="value">{{ formatNumber(summary.totalActivePowerKw) }}</div>
          <div class="hint">有功功率总计</div>
        </div>
        <div class="summary-card reactive-power">
          <div class="label">无功功率（kVar）</div>
          <div class="value">{{ formatNumber(summary.totalReactivePowerKw) }}</div>
          <div class="hint">无功功率总计</div>
        </div>
      </div>
    </div>

    <div class="report-table card">
      <div class="card-body">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          v-loading="tableLoading"
        >
          <el-table-column label="序号" width="70" align="center">
            <template slot-scope="scope">
              {{ (pagination.pageNum - 1) * pagination.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="deviceName" label="主机名称" width="140" />
          <el-table-column prop="dateText" label="时间" width="150" />
          <el-table-column label="今日运行状态" width="140">
            <template slot-scope="scope">
              <div class="table-status-cell">
                <img 
                  v-if="scope.row.isPowerOnPos === '1'" 
                  src="@/assets/images/pz-pumpRunIcon.png" 
                  alt="运行"
                  class="table-status-icon"
                />
                <img 
                  v-else 
                  src="@/assets/images/pz-pumpStopIcon.png" 
                  alt="停止"
                  class="table-status-icon"
                />
                <span>{{ scope.row.isPowerOnPos === '1' ? '运行过' : '未运行' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="totalActivePowerKw" label="累计有功功率(kW)" />
          <el-table-column prop="totalReactivePowerKw" label="累计无功功率(kVar)" />
          <el-table-column prop="powerFactor" label="功率因数" />
          <el-table-column prop="runtimeHours" label="运行时长(h)" />
          <el-table-column prop="totalEnergyKwh" label="用电量(kW·h)" />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-link type="primary" @click="viewDetails(scope.row)">查看明细</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination
            background
            layout="prev, pager, next, total"
            :current-page="pagination.pageNum"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="detailDialog.visible"
      :title="detailDialog.title"
      width="90%"
      top="5vh"
    >
      <div class="detail-toolbar">
        <el-date-picker
          v-model="detailDialog.date"
          type="date"
          placeholder="选择时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          clearable
          @change="handleDetailDateChange"
        />
        <el-button type="primary" icon="el-icon-search" @click="fetchDetailSnapshots">查询</el-button>
      </div>
      <el-table
        :data="detailDialog.rows"
        v-loading="detailDialog.loading"
        border
        height="480"
      >
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (detailDialog.pageNum - 1) * detailDialog.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="time" min-width="180">
          <template slot-scope="scope">{{ formatTime(scope.row.time) }}</template>
        </el-table-column>
        <el-table-column label="主机状态" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.isPowerOnPos === 1 ? '运行' : '停机' }}
          </template>
        </el-table-column>
        <el-table-column label="电流(A)" align="center">
          <el-table-column label="Ia" prop="ia" min-width="90" />
          <el-table-column label="Ib" prop="ib" min-width="90" />
          <el-table-column label="Ic" prop="ic" min-width="90" />
        </el-table-column>
        <el-table-column label="有功功率(kW)" prop="p" min-width="110" />
        <el-table-column label="无功功率(kVar)" prop="q" min-width="110" />
        <el-table-column label="功率因数" prop="powerfactor" min-width="110" />
        <el-table-column label="电压(V)" align="center">
          <el-table-column label="Uab" prop="uab" min-width="100" />
          <el-table-column label="Ubc" prop="ubc" min-width="100" />
          <el-table-column label="Uca" prop="uca" min-width="100" />
        </el-table-column>
        <el-table-column label="温度(℃)" align="center">
          <el-table-column
            v-for="field in detailTemperatureFields"
            :key="field.key"
            :label="field.label"
            :prop="field.key"
            min-width="105"
          />
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next, total"
        :current-page="detailDialog.pageNum"
        :page-size="detailDialog.pageSize"
        :total="detailDialog.total"
        class="detail-pagination"
        @current-change="handleDetailPageChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import TimeSelect from '@/views/statistics/components/timeSelect.vue'
import {
  getHostInfo,
  getRuntimeTotal,
  getActiveEnergySummary,
  getActivePowerTotal,
  getReactivePowerTotal,
  getAggregateMetrics,
  getHostRunStatus,
  getHostOperationReport,
  getDeviceSnapshots
} from '@/views/statistics/api/screenApi'

export default {
  name: 'PumpStationReport',
  components: { TimeSelect },
  data() {
    return {
      hostList: [],
      allHostOption: {
        device_id: 'ALL',
        device_kg_id: 'ALL',
        device_name: '全部主机',
        isAll: true
      },
      selectedHost: null,
      scope: 'month',
      pageLoading: false,
      summary: {
        runtimeHours: 0,
        totalEnergyKwh: 0,
        totalActivePowerKw: 0,
        totalReactivePowerKw: 0
      },
      tableData: [],
      tableLoading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      detailDialog: {
        visible: false,
        title: '',
        rows: [],
        loading: false,
        date: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        deviceKgId: ''
      },
      detailTemperatureFields: [
        { key: 'astatortemp1', label: '定子U1' },
        { key: 'bstatortemp1', label: '定子V1' },
        { key: 'cstatortemp1', label: '定子W1' },
        { key: 'astatortemp2', label: '定子U2' },
        { key: 'bstatortemp2', label: '定子V2' },
        { key: 'cstatortemp2', label: '定子W2' },
        { key: 'shaftendtemp', label: '轴伸端' },
        { key: 'nonshaftendtemp', label: '非轴伸端' }
      ]
    }
  },
  computed: {
    hostStatusList() {
      return this.hostList.map(item => {
        const { statusType, icon, text } = this.resolveStatus(item)
        return { ...item, statusType, icon, statusText: text }
      })
    },
    hostSelectOptions() {
      return [this.allHostOption, ...this.hostList]
    },
    dateLabel() {
      const now = new Date()
      const y = now.getFullYear()
      const m = now.getMonth() + 1
      const d = now.getDate()
      if (this.scope === 'today') {
        return `${y}年${m}月${d}日运行日报`
      }
      if (this.scope === 'month') {
        return `${y}年${m}月运行月报`
      }
      return `${y}年运行年报`
    },
    scopeLabel() {
      const map = { today: '今日', month: '本月', year: '本年度' }
      return map[this.scope] || '当前'
    },
    todayPowerOnCount() {
      return this.hostList.filter(item => item.isPowerOnPos === '1').length
    }
  },
  watch: {
    selectedHost(val) {
      if (val && val.device_kg_id) {
        this.loadSummary()
        this.loadTableData(1)
      }
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    async initPage() {
      await this.loadHosts()
    },
    async loadHosts() {
      try {
        const res = await getHostInfo()
        const list = Array.isArray(res.data) ? res.data : []
        const mapped = list.map(item => ({
          device_id: item.device_id,
          device_kg_id: item.device_kg_id,
          device_name: item.device_name || '未命名主机',
          isPowerOnPos: 'unknown'
        }))
        this.hostList = mapped
        if (!this.selectedHost) {
          this.selectedHost = mapped.length ? mapped[0] : this.allHostOption
        }
        await this.loadHostRunStatus()
        await this.loadSummary()
        await this.loadTableData(1)
      } catch (error) {
        console.error('加载主机列表失败', error)
        this.hostList = []
      }
    },
    async loadSummary() {
      if (!this.selectedHost) {
        return
      }
      this.pageLoading = true
      try {
        if (this.isAllSelected()) {
          await this.loadAggregateSummary()
        } else {
          await this.loadSingleSummary()
        }
      } finally {
        this.pageLoading = false
      }
    },
    async loadAggregateSummary() {
      try {
        const res = await getAggregateMetrics(this.scope)
        if (res.code === 200 && res.data) {
          this.summary = {
            runtimeHours: res.data.runtimeHours || 0,
            totalEnergyKwh: res.data.totalEnergyKwh || 0,
            totalActivePowerKw: res.data.totalActivePowerKw || 0,
            totalReactivePowerKw: res.data.totalReactivePowerKw || 0
          }
          return
        }
      } catch (error) {
        console.error('加载全部主机汇总失败', error)
      }
      this.summary = {
        runtimeHours: 0,
        totalEnergyKwh: 0,
        totalActivePowerKw: 0,
        totalReactivePowerKw: 0
      }
    },
    async loadSingleSummary() {
      const deviceKgId = this.selectedHost.device_kg_id
      try {
        const results = await Promise.allSettled([
          getRuntimeTotal(deviceKgId, this.scope),
          getActiveEnergySummary(deviceKgId, this.scope),
          getActivePowerTotal(deviceKgId, this.scope),
          getReactivePowerTotal(deviceKgId, this.scope)
        ])
        const [runtimeRes, energyRes, activeRes, reactiveRes] = results.map(item =>
          item.status === 'fulfilled' ? item.value : { code: 500, data: null }
        )
        this.summary.runtimeHours = runtimeRes.code === 200 ? runtimeRes.data?.runtimeHours || 0 : 0
        this.summary.totalActivePowerKw =
          activeRes.code === 200 ? activeRes.data?.totalActivePowerKw || 0 : 0
        this.summary.totalReactivePowerKw =
          reactiveRes.code === 200 ? reactiveRes.data?.totalReactivePowerKw || 0 : 0
        if (energyRes.code === 200 && energyRes.data?.summary) {
          const item = energyRes.data.summary.find(entry => entry.scope === this.scope)
          this.summary.totalEnergyKwh = item?.totalEnergyKwh || 0
        } else {
          this.summary.totalEnergyKwh = 0
        }
      } catch (error) {
        console.error('加载单主机汇总失败', error)
        this.summary = {
          runtimeHours: 0,
          totalEnergyKwh: 0,
          totalActivePowerKw: 0,
          totalReactivePowerKw: 0
        }
      }
    },
    async handleScopeChange(value) {
      this.scope = value
      await this.loadHostRunStatus()
      await this.loadSummary()
      await this.loadTableData(1)
    },
    handleHostChange(value) {
      if (!value) {
        this.selectedHost = this.allHostOption
      }
    },
    selectHost(item) {
      const target = this.hostList.find(host => host.device_kg_id === item.device_kg_id)
      if (target) {
        this.selectedHost = target
      }
    },
    isCurrentHost(item) {
      return this.selectedHost && this.selectedHost.device_kg_id === item.device_kg_id
    },
    isAllSelected() {
      return this.selectedHost && this.selectedHost.device_kg_id === this.allHostOption.device_kg_id
    },
    resolveStatus(item) {
      const flag = item.isPowerOnPos
      if (flag === '1') {
        return { statusType: 'run', icon: 'el-icon-video-play', text: '运行过' }
      }
      if (flag === '0') {
        return { statusType: 'idle', icon: 'el-icon-video-pause', text: '未运行' }
      }
      return { statusType: 'unknown', icon: 'el-icon-info', text: '状态未上报' }
    },
    async loadHostRunStatus() {
      try {
        const res = await getHostRunStatus(this.scope)
        if (res.code === 200 && Array.isArray(res.data)) {
          const mapById = new Map(res.data.map(item => [item.device_kg_id, item.isPowerOnPos]))
          this.hostList = this.hostList.map(item => {
            const flag = mapById.get(item.device_kg_id) || '0'
            return { ...item, isPowerOnPos: flag }
          })
        }
      } catch (error) {
        console.error('加载主机运行状态失败', error)
      }
    },
    dotClass(flag) {
      if (flag === '1') {
        return 'dot-on'
      }
      if (flag === '0') {
        return 'dot-off'
      }
      return 'dot-unknown'
    },
    async loadTableData(pageNum = 1) {
      this.tableLoading = true
      try {
        const params = {
          scope: this.scope,
          pageNum,
          pageSize: this.pagination.pageSize
        }
        if (!this.isAllSelected() && this.selectedHost) {
          params.deviceKgId = this.selectedHost.device_kg_id
        }
        const res = await getHostOperationReport(params)
        if (res.code === 200) {
          this.tableData = res.rows || []
          this.pagination.total = res.total || 0
          this.pagination.pageNum = pageNum
        }
      } catch (error) {
        console.error('加载主机运行记录失败', error)
        this.tableData = []
        this.pagination.total = 0
      } finally {
        this.tableLoading = false
      }
    },
    handlePageChange(page) {
      this.loadTableData(page)
    },
    viewDetails(row) {
      const deviceKgId = row.deviceKgId || (this.selectedHost && this.selectedHost.device_kg_id)
      if (!deviceKgId) {
        this.$message.warning('缺少主机编号，无法查看明细')
        return
      }
      this.detailDialog.visible = true
      this.detailDialog.title = `${row.deviceName || this.selectedHost.device_name || '主机'}运行明细`
      this.detailDialog.deviceKgId = deviceKgId
      this.detailDialog.pageNum = 1
      this.detailDialog.date = ''
      this.fetchDetailSnapshots()
    },
    async fetchDetailSnapshots() {
      if (!this.detailDialog.deviceKgId) {
        return
      }
      this.detailDialog.loading = true
      try {
        const params = {
          deviceKgId: this.detailDialog.deviceKgId,
          scope: this.scope,
          pageNum: this.detailDialog.pageNum,
          pageSize: this.detailDialog.pageSize
        }
        if (this.detailDialog.date) {
          params.startTime = `${this.detailDialog.date} 00:00:00`
          params.endTime = `${this.detailDialog.date} 23:59:59`
        }
        const res = await getDeviceSnapshots(params)
        const data = res.code === 200 ? res.data || {} : {}
        this.detailDialog.rows = data.records || []
        this.detailDialog.total = data.total || 0
      } catch (error) {
        console.error('加载运行明细失败', error)
        this.detailDialog.rows = []
        this.detailDialog.total = 0
      } finally {
        this.detailDialog.loading = false
      }
    },
    handleDetailPageChange(page) {
      this.detailDialog.pageNum = page
      this.fetchDetailSnapshots()
    },
    handleDetailDateChange(value) {
      this.detailDialog.date = value || ''
    },
    formatNumber(val) {
      if (val === null || val === undefined || Number.isNaN(Number(val))) {
        return '0.00'
      }
      const num = Number(val)
      return num >= 10000 ? (num / 10000).toFixed(2) : num.toFixed(2)
    },
    formatTime(value) {
      if (!value) {
        return '--'
      }
      return value.replace('T', ' ')
    }
  }
}
</script>

<style lang="scss" scoped>
.pump-report {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 14px;
}

.title-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.title-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #2d4a6b;
}

.subtitle {
  color: #8c8c8c;
  font-size: 13px;
}

.date-text {
  font-size: 16px;
  color: #6c6c6c;
}

.content-row {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.status-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 500px;
  max-width: 600px;
  background: #f5f7fa;
  padding: 16px;
  border-radius: 8px;
  
}

.status-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  padding-bottom: 8px;
  
  .status-count {
    font-weight: 400;
    font-size: 14px;
    color: #606266;
  }
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

.status-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #ebeef5;
  min-width: 200px;

  &.run .icon-wrap {
    background: transparent;
  }

  &.idle .icon-wrap {
    background: transparent;
  }

  &.unknown .icon-wrap {
    background: linear-gradient(135deg, #a8c0ff, #3f2b96);
  }
}

.icon-wrap {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  
  .status-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
}

.status-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;

  .name {
    font-weight: 600;
    color: #303133;
    font-size: 14px;
    white-space: nowrap;
  }

  .state {
    font-size: 12px;
    color: #303133;
    white-space: nowrap;
    margin-left: auto;
  }
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-on {
  background: #ff4d4f;
  box-shadow: 0 0 6px rgba(255, 77, 79, 0.6);
}

.dot-off {
  background: #52c41a;
  box-shadow: 0 0 6px rgba(82, 196, 26, 0.6);
}

.dot-unknown {
  background: #dcdfe6;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 550px);
}

.summary-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 28px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  margin-top: 8px;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
  }

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  .label {
    font-size: 15px;
    opacity: 0.95;
    font-weight: 500;
    position: relative;
    z-index: 1;
  }

  .value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .hint {
    font-size: 13px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
  }
}

.summary-card.runtime {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  &:hover {
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
  }
}

.summary-card.energy {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  
  &:hover {
    box-shadow: 0 8px 30px rgba(240, 147, 251, 0.3);
  }
}

.summary-card.active-power {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  
  &:hover {
    box-shadow: 0 8px 30px rgba(79, 172, 254, 0.3);
  }
}

.summary-card.reactive-power {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  
  &:hover {
    box-shadow: 0 8px 30px rgba(67, 233, 123, 0.3);
  }
}

.report-table {
  margin-top: 20px;
}

.table-pagination {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}

.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.card-body {
  padding: 16px 20px;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.table-status-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .table-status-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
}

.detail-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.detail-pagination {
  margin-top: 12px;
  text-align: right;
}

@media (max-width: 1400px) {
  .content-row {
    flex-direction: column;
  }
  
  .status-section {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  
  .status-strip {
    width: 100%;
  }
  
  .summary-grid {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .status-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1600px) {
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .report-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .title-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .status-strip {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }
}
</style>
